<template>
	<view>
		<navbar :title='title' backgroundColor='#566FFF'>
		</navbar>
		<view class="content">
			<view class="head">
				<view class="headview">
					<view class="headone">
						<text>名称移动</text>
					</view>
					<view class="headtwo">
						<view class="headtwoitem">
							置顶
						</view>
						<view class="headtwoitem">
							删除
						</view>
						<view class="headtwoitem">
							移动
						</view>
					</view>
				</view>
				
			</view>
			<view class="list">
				<p class="tishi">*按住名称上下移动调整位置顺序</p>
				<!-- <view class="item" v-for="(item,index) in 20" :key="index">
					<view class="headone">
						<text>沪银2212</text>
					</view>
					<view class="headtwo">
						<view class="headtwoitem">
                            <image src="/static/qi/log-in.png" mode=""></image>
						</view>
						<view class="headtwoitem">
							<image src="/static/qi/trash.png" mode=""></image>
						</view>
						<view class="headtwoitem">
							<image src="/static/qi/menu.png" mode=""></image>
						</view>
					</view>
				</view> -->
				<drag-and-drop-sort :controlsList="dataArray" :controlsSize="{width: 340, height: 50}" @reload="reload">
					<!-- 自定义内容 -->
					<template #content="{item}">
						<view class="item">
							<view class="headone">
								<text>沪银2212</text>
							</view>
							<view class="headtwo">
								<view class="headtwoitem">
						            <image src="/static/qi/log-in.png" mode=""></image>
								</view>
								<view class="headtwoitem">
									<image src="/static/qi/trash.png" mode=""></image>
								</view>
								<view class="headtwoitem">
									<image src="/static/qi/menu.png" mode=""></image>
								</view>
							</view>
						</view>
					</template>
				</drag-and-drop-sort>
			</view>
		</view>
	</view>
</template>

<script>
	import dragAndDropSort from '@/components/drag-and-drop-sort-A/drag-and-drop-sort-A.vue';
	export default {
		components: {
			dragAndDropSort,
		},
		data() {
			return {
				title:'编辑自选',
				list: [{
					name: '主力合约'
				}, {
					name: '上期所'
				}, {
					name: '大商所'
				},{
					name: '上期能源'
				},{
					name: '中金所'
				}],
				current: 0,
				dataArray: [
					{color: '#ee3131', label: '1'},
					{color: '#2dc3d5', label: '2'},
					{color: '#f5aa41', label: '3'},
					{color: '#42b983', label: '4'},
					{color: '#1983fb', label: '5'},
					{color: '#a15afd', label: '6'},
					{color: '#ffe874', label: '7'},
					{color: '#00a8fb', label: '8'},
					{color: '#f36586', label: '9'},
					{color: '#16d46b', label: '10'},
				],
			};
		},
		methods:{
			change(index) {
				this.current = index;
			},
			reload(e){
				console.log("拖动后返回数据"+JSON.stringify(e))
			}
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  height: 100%;
	  .head{
		  position: fixed;
		  width: 100%;
		  height: 90rpx;
		  z-index: 100;
		  top: 88rpx;
		  background-color: #fff;
		  box-shadow: 0px 4rpx 10rpx 0px rgba(86,111,255,0.1);
		  .headview{
			  position: relative;
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			  padding: 0 20rpx;
			  .headone{
				  width: 70%;
				  position: relative;
				  text{
					  overflow: hidden; //超出的文本隐藏
					  text-overflow: ellipsis; //溢出用省略号显示
					  white-space: nowrap;  // 默认不换行；
					  font-size: 24rpx;
					  font-family: PingFang SC-中等, PingFang SC;
					  font-weight: 500;
					  color: #373A4D;
					  width: 100%;
					  display: block;
				  }
			  }
			  .headtwo{
				  width: 30%;
				  display: flex;
				  flex-direction: row;
				  align-items: center;
				  .headtwoitem{
					  width: 33.33%;
					  display: flex;
					  height: 100%;
					  align-items: center;
					  justify-content: center;
					  font-size: 24rpx;
					  font-family: PingFang SC-中等, PingFang SC;
					  font-weight: normal;
					  color: #9E9E9E;
				  }
			  }
		  }
	  }
	  .list{
		  position: relative;
		  display: flex;
		  flex-direction: column;
		  padding: 0rpx 20rpx;
		  margin-top: 100rpx;
		  .tishi{
			  display: block;
			  font-size: 24rpx;
			  margin: 20rpx 0;
			  font-family: PingFang SC-中等, PingFang SC;
			  font-weight: normal;
			  color: #9E9E9E;
		  }
		  .item{
			  width: 100%;
			  height: 100rpx;
			  display: flex;
			  
			  flex-direction: row;
			  align-items: center;
			  border-bottom: 1rpx solid #EEEEEE;
			  .headone{
				  width: 70%;
				  position: relative;
				  text{
					  overflow: hidden; //超出的文本隐藏
					  text-overflow: ellipsis; //溢出用省略号显示
					  white-space: nowrap;  // 默认不换行；
					  font-size: 24rpx;
					  font-family: PingFang SC-中等, PingFang SC;
					  font-weight: 500;
					  color: #373A4D;
					  width: 100%;
					  display: block;
				  }
			  }
			  .headtwo{
				  width: 30%;
				  display: flex;
				  flex-direction: row;
				  align-items: center;
				  .headtwoitem{
					  width: 33.33%;
					  display: flex;
					  height: 100%;
					  align-items: center;
					  justify-content: center;
					  font-size: 24rpx;
					  font-family: PingFang SC-中等, PingFang SC;
					  font-weight: normal;
					  color: #9E9E9E;
					  image{
						  width: 40rpx;
						  height: 40rpx;
					  }
				  }
			  }
		  }
	  }
  }
</style>
